<div class="layuimini-container layuimini-page-anim">
	<div class="layuimini-main">

		<fieldset class="table-search-fieldset">
			<legend>搜索信息</legend>
			<div style="margin: 10px 10px 10px 10px">
				<form class="layui-form layui-form-pane" action="">
					<div class="layui-form-item">
						<div class="layui-inline">
							<label class="layui-form-label">IP</label>
							<div class="layui-input-inline">
								<input type="text" name="IP" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">地区</label>
							<div class="layui-input-inline">
								<input type="text" name="area" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">节点状态</label>
							<div class="layui-input-inline">
								<input type="text" name="node_status" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<label class="layui-form-label">挂载机器</label>
							<div class="layui-input-inline">
								<input type="text" name="mount_with" autocomplete="off" class="layui-input">
							</div>
						</div>
						<div class="layui-inline">
							<button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn"><i class="layui-icon"></i>
								搜 索</button>
						</div>
					</div>
				</form>
			</div>
		</fieldset>

		<script type="text/html" id="toolbarDemo">
			<div class="layui-btn-container">
                
                <button class="layui-btn layui-btn-sm layui-btn-checked data-delete-btn" lay-event="delete"> 同步所有任务 </button>
            </div>
        </script>

		<table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

		<script type="text/html" id="currentTableBar">
			
            <a class="layui-btn layui-btn-xs layui-btn-warm data-count-delete" lay-event="delete">同步任务</a>
        </script>

	</div>
</div>

<script>
	layui.use(['form', 'table', 'miniPage', 'element'], function() {
		var $ = layui.jquery,
			form = layui.form,
			table = layui.table,
			miniPage = layui.miniPage;

		table.render({
			elem: '#currentTableId',
			url: 'http://127.0.0.1:8199/gpulist',
			//url: 'api/table.json',
			toolbar: '#toolbarDemo',
			defaultToolbar: ['filter', 'exports', 'print', {
				title: '提示',
				layEvent: 'LAYTABLE_TIPS',
				icon: 'layui-icon-tips'
			}],
			cols: [
				[{
						type: "checkbox",
						width: 50
					},
					{
						field: 'id',
						width: 80,
						title: 'ID',
						sort: true
					},
					{
						field: 'ip',
						width: 150,
						title: 'IP',
						sort: true
					},
					{
						field: 'cpu_cores',
						width: 90,
						title: 'CPU(核)'
					},
					{
						field: 'total_memory',
						width: 80,
						title: '内存(G)'
					},
					{
						field: 'gpu_numbers',
						Width: 80,
						title: 'GPU(个)',
						sort: true
					},
					{
						field: 'mount_with',
						width: 350,
						title: '挂载机器'
					},
					{
						field: 'area',
						width: 100,
						title: '地区',
						sort: true
					},
					{
						field: 'node_status',
						width: 120,
						title: '节点状态',
						sort: true
					},
					{
						title: '操作',
						minWidth: 150,
						toolbar: '#currentTableBar',
						align: "center"
					}
				]
			],
			limits: [10, 15, 20, 25, 50, 100],
			limit: 15,
			page: true,
			skin: 'line'
		});

		// 监听搜索操作
		form.on('submit(data-search-btn)', function(data) {
			var result = JSON.stringify(data.field);
			layer.alert(result, {
				title: '最终的搜索信息'
			});

			//执行搜索重载
			table.reload('currentTableId', {
				page: {
					curr: 1
				},
				where: {
					searchParams: result
				}
			}, 'data');

			return false;
		});

		/**
		 * toolbar事件监听
		 */
		table.on('toolbar(currentTableFilter)', function(obj) {
            if (obj.event === 'delete') { // 监听删除操作
				var checkStatus = table.checkStatus('currentTableId'),
					data = checkStatus.data;
				var ip_list = []
				var id_list = []
				for (var i = 0; i < data.length; i++) {
					var ip = data[i].ip;
					var id = data[i].id
					ip_list.push(ip)
					id_list.push(id)
				}
				var a = ip_list.join("</br>");
				// layer.alert(JSON.stringify(data));
				layer.alert("正在同步所有任务，请1分钟后刷新页面")
				$.ajax({
					type:'post',
					url:'http://127.0.0.1:8199/task/gpumonitorall',
					data:{ids:[ip_list]},
					traditional: true,
				})
			}
		});

		//监听表格复选框选择
		table.on('checkbox(currentTableFilter)', function(obj) {
			console.log(obj)
		});

		table.on('tool(currentTableFilter)', function(obj) {
			var data = obj.data;
            if (obj.event === 'delete') {
				layer.confirm('即将同步数据', function(index) {
					obj.del();
					layer.close(index);
					$.ajax({
						type: 'post',
						url: 'http://127.0.0.1:8199/task/gpumonitor',
						data: data,
					})
				});
			}
		});

	});
</script>
